<template>
  <view class="custom-title">
    <view class="work-order-title flex-row" :class="{ borderBottom }">
      <text>
        {{ props.title }}
      </text>
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "处理信息"
  },
  borderBottom: {
    type: Boolean,
    default: false
  }
});
</script>

<style lang="scss" scoped>
.custom-title {
  padding: 0 20rpx;
}
.work-order-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 28rpx;
  line-height: 28rpx;
  padding-left: 16rpx;
  height: 64rpx;
  // font-weight: bold;
  &::before {
    content: "";
    width: 8rpx;
    height: 32rpx;
    position: absolute;
    left: 0;
    background: linear-gradient(to bottom, #4689f2, #2ef4ee);
  }
}
.borderBottom {
  border-bottom: 2rpx dashed $uni-bottom-linecolor;
}
</style>
